<!--催收员进展统计-->
<template>
  <div class="page">
    <data-box ref="databox" :params="params" row-key="id" @resetForm="resetClass" :server="server.search" autoSearch>
      <!--输入区域-->
      <template slot="input">
        <el-form-item label="案件编号" prop="cupoCasenum">
          <el-input v-model="params.cupoCasenum"></el-input>
        </el-form-item>
        <el-form-item label="客户姓名" prop="custName">
          <el-input v-model="params.custName"></el-input>
        </el-form-item>
        <el-form-item label="催收部门" prop="department">
          <el-cascader v-model="params.departments" :options="orgNameList" @change="getcupoName" :props="{value:'deptCode',label:'name'}" change-on-select :show-all-levels="false" clearable></el-cascader>
        </el-form-item>
        <el-form-item label="催收员" prop="cupoName">
          <el-input v-model="params.cupoName" v-if="params.department===''"></el-input>
          <el-select v-model="params.cupoName" placeholder="请选择" clearable v-else>
            <el-option v-for="{userId,realName} in orgCuponameList" :key="userId" :label="realName" :value="realName">
            </el-option>
          </el-select>
        </el-form-item>
      </template>
      <!--数据列区域-->
      <template slot="column">
        <el-table-column type="index" label="序号" width="60">
        </el-table-column>
        <el-table-column prop="cupoCasenum" label="案件编号">
        </el-table-column>
        <el-table-column prop="status" label="案件状态">
          <template scope="scope">
            <span>{{scope.row.status | typeCodeConvert('0018')}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="custName" label="客户姓名">
        </el-table-column>
        <el-table-column prop="cupoName" label="催收员">
        </el-table-column>
        <el-table-column prop="cupoNum" label="催计数">
        </el-table-column>
        <el-table-column prop="follNum" label="跟进记录条数">
        </el-table-column>
        <el-table-column prop="follDate" label="最新跟进日期">
        </el-table-column>
      </template>
      <!--按钮区域-->
      <template slot="button">
        <el-button @click="exportReport">导出</el-button>
      </template>
    </data-box>
  </div>
</template>
<script>
  import DataBox from '@/components/DataBox'
  import servers from '@/config/servers'
  import { downloadFile } from '@/util/common'
  import net from '@/util/net'
  import { mapState, mapActions } from 'vuex'

  export default {
    name: 'progress-report',
    data() {
      return {
        server: {
          search: servers.ReportManage.get_cupo_progress,
          exportReport: servers.ReportManage.export_cupo_progress
        },
        params: {
          custName: '',
          cupoCasenum: '',
          departments: [],
          status: '',
          department: '',
          cupoName: '',
          reportType: '',
          follDate: '',
          follNum: '',
          cupoNum: ''
        },
        orgNameList: [],
        orgCuponameList: [],
        mounted() {}
      }
    },
    computed: {
      ...mapState({
        deptInfo: state => state.callAcc.dept_info
      })
    },
    watch: {
      deptInfo() {
        this.getOrgNameList()
      }
    },
    methods: {
      // 重置催收部门
      resetClass() {
        this.params.departments = []
      },
      /**
       * 导出报表
       */
      exportReport() {
        net.send({
          server: this.server.exportReport,
          data: this.params
        }).then((data) => {
          // 接口返回的数据
          if (data) {
            downloadFile(data, '进展报表')
          } else {
            this.$message({
              type: 'info',
              message: '暂无数据'
            })
          }
        }, err => {
          this.$message({
            type: 'info',
            message: err.reason
          })
        })
      },
      // 添加Actions
      ...mapActions([
        'updateDepartmentNameInfo'
      ]),
      /**
       * 获取组织名称列表
       */
      getOrgNameList() {
        let data = this.deptInfo.map(v => Object.assign({}, v))
        let fun = (id) => {
          // 递归对象子元素
          let list = data.filter(x => x.pid === id).map(node => {
            // 递归构建子节点
            let children = fun(node.deptId)
            if (children && children.length) {
              node.children = children
            }
            return node
          })
          return list
        }
        // 生成数据树
        this.orgNameList = fun(this.$store.state.user.departments[0].deptId)
      },
      /**
       * 根据部门获取催收员
       */
      getcupoName() {
        this.params.cupoName = ''
        if (this.params.departments.length > 0) {
          this.params.department = this.params.departments[this.params.departments.length - 1]
          net.send({
            server: servers.CallAcc.get_user_controller,
            data: {
              deptCode: this.params.department
            }
          }).then((data) => {
            this.orgCuponameList = data
          }, err => {
            this.$message({
              type: 'info',
              message: err.reason
            })
          })
        } else {
          this.params.department = ''
        }
      }
    },
    mounted() {
      this.updateDepartmentNameInfo()
    },
    components: {
      DataBox
    }
  }

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>


</style>
